

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="js/chart-helper.js"></script>
        <script type="text/javascript" src="js/location-works.js"></script>
        <script type="text/javascript" src="js/stat.js"></script>
        <link rel="stylesheet" type="text/css" href="css/fiu.css">
        <link href="http://www.cis.fiu.edu/images/scislogo.png" rel="shortcut icon">
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <title>Twitter Statistics</title>
    </head>
    <body>
        <div class="title-bar">
            <h1>Twitter User Statistics</h1>
        </div>
        <div class="input-window" >
            <div id="div_user_form" class="user-input">
                <label id="div_user_label" for="div_user_input">
                    User
                </label> 
                <input type="text" value="" id="div_user_input" required="true" requiredmessage="requiredFieldMessage" maxlength="100" autocomplete="off">
                
            </div>
            <div id="div_topic_form" class="user-input">
                <label id="div_topic_label" for="div_topic_input">
                    Topic
                </label> 
                <input type="text" value="" id="div_topic_input" required="true" requiredmessage="requiredFieldMessage" maxlength="100" autocomplete="off">
                
            </div>
            <div id="div_location_form" class="user-input">
                <label id="div_location_label" for="div_location_input">
                    Location
                </label> 
                <input type="text" value="" id="div_location_input" required="true" requiredmessage="requiredFieldMessage" maxlength="100" autocomplete="off">
                
            </div>
            
            <div id="div_date_form" class="user-input">
                <label id="div_date_label" for="date_location_input">
                    Date
                </label>
                 From:<br/> <input type="text" id="datepicker_for" name ="from"/><br/>
                 To:<br/><input type="text" id="datepicker_to" name ="to"/>

            </div>
            
            <div  class="user-input">
                <button id="btn_ok" >OK</button>
                <button id="btn_reset">Reset</button>
            </div>
        </div>
        <div  class="result-area">
            <div class="description-list-cell">
                <div  class="description-list">
                    Top Users<br/>
                    <ul id="user-list">
                        
                    </ul>
                </div>
                <div class="description-list">
                    Top Topics <br/>
                    <ul id="topic-list">
                        
                    </ul> 
                </div>
            </div>
            <div class="cell">
                <div id="continent-pie">
                    Pie chart
                </div>
            </div>
<!--             <div class="cell">
                <div class="pie-chart">
                    Pie chart
                </div>
            </div>-->
            <div class="map-container new-row">
                <div id="map-canvas" class="map"></div>            
            </div>
            <div class="cell new-row">
                <div class="graph-0">
                    North America
                </div>
            </div>
            <div class="cell">
                <div class="graph-1">
                    Asia
                </div>
            </div>
            <div class="cell new-row">
                <div class="graph-2">
                    Europe
                </div>
            </div>
            <div class="cell">
                <div class="graph-3">
                    Africa
                </div>
            </div>
        </div>
        
        
    </body>
</html>
